<template>
	<view class="body">
		<xk-header title="巡检记录"></xk-header>
		<view class="list" >
			<view class="list-item header" @click="orderMore = !orderMore">
				<view>巡检单号:  {{data.inspece_no}}</view>
				<image v-if="!orderMore" src="/static/up.png"></image>
				<image v-else  src="/static/down.png"></image>
			</view>
			<view v-if="orderMore" class="data-item">
				<view class="order-info">
					<view class="info-item"><view class="key">设备信息：</view>{{data.device_code}}-{{data.device_name}}</view>
					<view class="info-item"><view class="key">巡检位置：</view>-</view>
					<view class="info-item"><view class="key">巡检时段：</view>{{data.plan_start_time}} - {{data.plan_end_time}}</view>
				</view>
			</view>
		</view>
		<swiper class="swiper" :style="{height: swiperHeight + 'px'}" :current="current"
		 :duration="duration" @change="swiperTab">
			<swiper-item v-for="(item, index) in data.dets" :key="index">
				<view class="swiper-item">
					<view class="swiper-info" style="margin-top: 20rpx;">
						<view class="title">
							<view>巡检明细</view>
							<view class="right-title">
								共<view style="margin: 0 6rpx;color: #2C72FF;">{{data.dets.length}}</view>个巡查项
							</view>
						</view>
						<view style="display: flex; align-items: center;justify-content: space-between;">
							<view class="sub-title">{{index + 1}}/{{data.dets.length}} 巡查项</view>
							<view v-if="item.inspece_num == null || item.inspece_num == ''" class="result-state"></view>
							<view v-else-if="item.inspece_num >= item.min_num && item.inspece_num <= item.max_num" class="result-state ok">正常</view>
							<view v-else class="result-state warn">异常</view>
						</view>
						<view class="content">
							<text>
								{{item.inspece_content}}
								标准值：{{item.standard_num}}
								最小值：{{item.min_num}}
								最大值：{{item.max_num}}
							</text>
						</view>
						<view>
							<input v-model="item.inspece_num" class="result-input" placeholder="请输入当前巡查值" placeholder-class="placeholder" />
						</view>
						<view class="handle-btn">
							<view v-if="index != 0" @click="()=>{current--}">上一项</view>
							<view v-if="index != data.dets.length - 1" @click="()=>{current++}">下一项</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- <view class="from-item" style="margin-top: 20rpx;">
			<view class="title">异常描述</view>
			<textarea v-model="formData.patrol_remark" type="text" placeholder="在此输入巡查异常描述" placeholder-class="placeholder"/>
		</view> -->
		<view class="from-item upload-img-item" style="margin-top: 20rpx;" >
			<view class="title">上传巡检照片</view>
			<upload-image :images="formData.patrol_image" @onChange="(images) => {formData.patrol_image = images}"/>
		</view>
		<view class="from-item">
			<view class="title">备注</view>
			<textarea v-model="formData.patrol_remark" type="text" placeholder="在此输入备注" placeholder-class="placeholder"/>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn" @click="finishPatrol">提交</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inspeceId: '',
				data: {},

				orderMore: true,
				optionNum: 4,
				swiperHeight: 624,
				touchable: true, //禁止手指滑动切换
				duration: 500, //滑动时长
				current: 0, //当前显示的下标
				formData:{
					patrol_remark: '',
					patrol_image: ''
				}
			};
		},
		onLoad(options){
			this.inspeceId = options.inspeceId
			this.getData();
		},
		onShow(){

		},
		mounted(){
			this.setSwiperHeight()
		},
		methods:{
			getData(){
				this.$api.baseData_getPdInspecelTask(this.inspeceId).then((res)=>{
					this.data = res.task
				})
			},
			swiperTab(e) {
				this.current = parseInt(e.target.current);
				this.setSwiperHeight()
			},
			setSwiperHeight() {
				console.log('222222h')
				this.$util.getElRect('.swiper-item').then(res=>{
					console.log(res)
					this.swiperHeight = res.height;
				})

			},
			finishPatrol(){
				let isFinish = true;
				let isError = false;
				for(let item of this.data.dets){
					if(item.inspece_num === null || item.inspece_num === ''){
						isFinish = false;
						break;
					}
					if(item.inspece_num <= item.min_num || item.inspece_num >= item.max_num){
						isError = true;
					}
				}
				if(!isFinish){
					this.$util.alert({
						content: "存在待巡查项目，无法完成提交",
					})
					return
				}

				this.$util.confirm({
					content: "确定提交完成巡查？",
					confirmText: "完成巡查"
				}).then(isConfirm => {
					if (isConfirm) {
						let detsData = [];
						// let remark = '';
						for(let item of this.data.dets){
							detsData.push({
								inspece_det_id: item.inspece_det_id,
								inspece_num: item.inspece_num,
							})
						}
						this.$util.post({
							url: "app/pdInspecelTask/register",
							data: {
								dets: detsData,
								patrol_remark: this.formData.patrol_remark,
								patrol_image: this.formData.patrol_image,
								inspece_id: this.inspeceId,
								isSubmit: true
							}
						}).then(res => {
							uni.$emit('refreshHomeDataList')
							uni.$emit('refreshInspecelTask')
							uni.redirectTo({
								url: '/pages/facility-patrol/facility-patrol-finish?type=done&inspeceId=' + this.inspeceId + '&isError=' + (isError ? '1' : '0')
							})
						})

					}
				})
			}
		}
	}
</script>

<style lang="scss">
@import '@/common/from.scss';
.result-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	.radio{
		display: flex;
		.r-item{
			display: flex;
			align-items: center;

			margin-right: 40rpx;
		}
	}
}

.result-state{
	font-size: 24rpx;
	font-weight: bolder;
	padding: 0 12rpx;
	border-radius: 4rpx;
	height: 50rpx;
	display: flex;
	align-items: center;
}
.warn{
	color: #FF3737;
	background-color: rgba($color: #FF3737, $alpha: 0.2);
}
.ok{
	color: #2ecc71;
	background-color: rgba($color: #2ecc71, $alpha: 0.2);
}
</style>
